<template>
    <div class="park">

        <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp"></gltitle>
        <div class="park-top" ref="tabbar" :class="{'ispc':mobile==2}">
            <div class="park-tabbar" :class="{ tabbg: current == 1 }">
                <div class="flexcenter" :class="{ tabbact: current == item.id }" v-for="item in tabbar" :key="item.id"
                    @click="handlerTab(item.id)">
                    {{ item.name }}</div>
            </div>
            <div class="park-body">
                <div>{{ $t('new.desc39') }}</div>
                <div>{{ $t('new.desc40') }}</div>
                <div>{{ $t('new.desc41') }}</div>
                <div>{{ $t('new.desc42') }}</div>
                <div>{{ $t('new.desc43') }}</div>
            </div>
        </div>
        <div class="parkcon" :style="{ paddingTop: topHeight + 'px' }">
            <van-list v-model="loading" :finished="finished" :loading-text="$t('load.loading')" @load="onLoad">
                <van-cell v-for="item in list" :key="item.id">
                    <div class="park-info">
                        <div class="flexcenter">
                            <p v-if="item.ranking == 1">
                                <img src="../../assets/images/dj1.png" alt="" />
                            </p>
                            <p v-else-if="item.ranking == 2"><img src="../../assets/images/dj2.png" alt="" /></p>
                            <p v-else-if="item.ranking == 3"><img src="../../assets/images/dj3.png" alt="" /></p>
                            <p v-else>{{ item.ranking }}</p>
                        </div>
                        <div>
                            <img :src="item.avatar" alt="" v-if="item.avatar != null" />
                            <img src="../../assets/images/ico_photo.png" alt="" v-else />
                        </div>
                        <div class="flexcenter">{{ item.userId }}</div>
                        <div class="flexcenter">{{ item.amount }}</div>
                        <div class="flexcenter">{{ item.subCount }}</div>
                    </div>
                </van-cell>
            </van-list>
        </div>
        <div class="park-invite flexcenter" @click="$router.push('/user/invite')">
            {{$t('my_grade.doc17')}}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            mobile:localStorage.getItem('ismobile'),
            finished: false,
            loading: false,
            list: [],
            titleSize: this.$t('new.desc2'),
            is_mt: true,
            current: 0,
            tabbar: [
                {
                    name: this.$t('new.desc3'),
                    id: 0
                },
                {
                    name: this.$t('new.desc4'),
                    id: 1
                }
            ],
            topHeight: 0
        }
    },
    mounted() {
        this.topHeight = this.$refs.tabbar.offsetTop + this.$refs.tabbar.clientHeight
    },
    methods: {
        handlerTab(i) {
            this.list = [];
            this.current = i;
            this.finished = false;
            this.loading = false;
        },
        onLoad() {
            setTimeout(() => {
                this.$post(this.URL.user.parklist, {
                    type: this.current
                }).then(res => {
                    if (res.code == 0) {
                        this.list = res.data;
                        this.finished = true;
                    }
                })
            }, 500);
        }
    }
}
</script>

<style lang="less" scoped>
.park {

    .park-top {
        position: fixed;
        top: 0.88rem;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 8;
        padding-top: .1rem;

        .park-tabbar {
            width: 100%;
            height: .8rem;
            background: url('../../assets/images/trade_left_select.png') center no-repeat;
            background-size: 100%;
            display: flex;

            div {
                flex: 0 0 50%;
                height: .8rem;
                font-size: .32rem;
                color: #AEAEAE;
            }

            .tabbact {
                color: #222;
            }
        }

        .tabbg {
            background: url('../../assets/images/trade_right_select.png') center no-repeat;
            background-size: 100% 100%;
        }

        .park-body {
            padding: .2rem;
            display: flex;

            div {
                flex: 0 0 1.6rem;
                font-size: .28rem;
                color: #999999;

                &:first-child {
                    flex: 0 0 1rem;
                }

                &:nth-child(2) {
                    flex: 0 0 1.2rem;
                }

            }
        }
    }

    .parkcon {
        padding-bottom: 1.2rem;
        .park-info {
            display: flex;

            div {
                flex: 0 0 1.6rem;
                height: .6rem;
                font-size: .28rem;
                color: #222;
                justify-content: left;

                &:first-child {
                    flex: 0 0 1rem;
                    img {
                        width: .4rem;
                        height: .4rem;
                    }
                }

                &:nth-child(2) {
                    flex: 0 0 1.2rem;

                    img {
                        width: .6rem;
                        height: .6rem;
                        border-radius: 50%;
                        object-fit: cover;
                    }
                }

            }
        }
    }
    .park-invite{
        position: fixed;
        width: 7.1rem;
        height: .8rem;
        left: 50%;
        bottom: 0.2rem;
        background: #2a64e4;
        font-size: .32rem;
        color: #FFFFFF;
        border-radius: 0.12rem;
        transform: translateX(-50%);
    }
}
</style>
